<template>
  <div class="card-carousel">
    <swiper :options="swiperOptions">
      <swiper-slide
        v-for="(card, index) in cards"
        :key="card.title"
        class="card-slide"
        :style="{
          zIndex: cards.length - index,
          opacity: index === 0 ? 1 : 0.5,
        }"
      >
        <div class="card-content">
          <h3>{{ card.title }}</h3>
          <p>{{ card.content }}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import Autoplay from "swiper";

const cards = ref([
  { title: "Card 1", content: "Content of Card 1" },
  { title: "Card 2", content: "Content of Card 2" },
  // 更多卡片...
]);

let swiperOptions = ref({
  loop: true, // 循环播放
  autoplay: {
    delay: 3000, // 自动切换间隔
    disableOnInteraction: false, // 不因用户交互暂停自动播放
  },
  // 添加必要的 CSS 类或样式以实现叠加效果，比如通过 z-index 控制叠加顺序
  slidesPerView: "auto", // 卡片可自适应宽度
  spaceBetween: 10, // 卡片之间的间距
})

</script>
<style scoped lang="scss">
.card-carousel {
  position: relative;
}
.card-slide {
  position: absolute;
  transition: opacity 0.5s; /* 添加过渡动画 */
}
.card-content {
  // 你的卡片样式
}
</style>
